<template>
  <div>
    <el-dialog
      title="班级列表"
      :visible="classAndGradeType"
      width="30%"
      @open="onOpen"
      @close="onClose"
    >
      <el-radio v-for="item in classData" :key="item.id" v-model="form.class_id" class="radio" :label="item.id">{{ item.class_name }}</el-radio>
      <span slot="footer" class="dialog-footer">
        <el-button @click="onClose">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getClassClass, postExamExamBindClass } from '@/api/exam'
export default {
  name: 'ClassAndGrade',
  props: {
    classAndGradeType: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      queryData: {
        subject_id: 1,
        state: 1
      },
      form: {
        class_id: '',
        exam_id: '',
        main_paper_id: ''
      },
      classData: []
    }
  },
  methods: {
    onClose() {
      this.$parent.classAndGradeType = false
    },
    async onOpen() {
      const res = await getClassClass(this.queryData)
      console.log('🚀 ~ res:', res.list)
      this.classData = res.list
    },
    async  onSubmit() {
      console.log(this.form)
      await postExamExamBindClass(this.form)
      // 提示
      this.$message.success('推送成功！')
      // 关
      this.onClose()
      // 刷新
      this.$parent.initData()
    }
  }
}
</script>

<style scoped>
.radio{
  display: block;
  padding: 10px;
}
</style>
